<template>
	<div class="">
		<div class="myMapbox">
			<map id="myMap" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" :longitude="longitude"
				:latitude="latitude" scale="10" :markers="markers" @markertap="markertap" show-scale :circles="circles"
				@regionchange="regionchangetab">
				<cover-image :style="'left: '+ windowWidth/2 +'px; top: '+ windowHeight/2 +'px;'"
					class="controls-play-img bounce-animation"
					src="@/static/image/system/currentposi.png"></cover-image>
			</map>
		</div>
		<view class="sou-item-list">
			<view class="list-item-name-box">
				<view class="sanshier fonweight xiaohei"><text class="textcenter">{{dianweiInfo.checkStatus==3?$t('xd.shsb'):$t('xd.xddz')}}</text>
				</view>
				<template v-if="(dianweiInfo.payStatus==1 && dianweiInfo.checkStatus==0) || (dianweiInfo.payStatus==1 && dianweiInfo.checkStatus==1) || dianweiInfo.payStatus==2 && dianweiInfo.checkStatus==0">
					<view class="xiaohei flexleft ershiba margin_top">
						<text class="ershiba xiaohei">{{$t('xd.jd')}}：</text>
						<text class="ershiba xiaohei xiaohui">{{longitude}}</text>
					</view>
					<view class="xiaohei flexleft margin_top ershiba">
						<text class="ershiba xiaohei">{{$t('xd.wd')}}：</text>
						<text class="ershiba xiaohei xiaohui">{{latitude}}</text>
					</view>
				</template>
				<template v-if="(dianweiInfo.checkStatus==1 && dianweiInfo.payStatus==2) || (dianweiInfo.checkStatus==3)">
					<view class="xiaohei ershiba margin_top">
						<text>{{$t('xd.jd')}}：{{dianweiInfo.longitude}}</text>
					</view>
					<view class="xiaohei ershiba">
						<text>{{$t('xd.wd')}}：{{dianweiInfo.latitude}}</text>
					</view>
				</template>
				<template v-if="dianweiInfo.checkStatus==3">
					<view class="xiaohei ershiba margin_top">
						<text>{{$t('xd.shbz')}}：</text>
						<text class="xiaohui">{{dianweiInfo.remarks}}</text>
					</view>
				</template>
			</view>
			<view class="but-box">
				<view class="btn-location flexcenter" v-if="(dianweiInfo.payStatus==1 && dianweiInfo.checkStatus==0) || (dianweiInfo.payStatus==1 && dianweiInfo.checkStatus==1)"
					@click="fixAddress(1)"><text class="textcenter xiaobai">{{$t('xd.xzf')}}{{price}}{{$t('xd.y')}}</text></view>
				<view class="btn-location flexcenter" v-if="dianweiInfo.payStatus==2 && dianweiInfo.checkStatus==0"
					@click="fixAddress(2)"><text class="textcenter xiaobai">{{$t('xd.qrwz')}}</text></view>
				<view class="btn-location flexcenter" style="background-color: #ff963c;" v-if="dianweiInfo.payStatus==2 && dianweiInfo.checkStatus==1"><text class="textcenter xiaobai">{{$t('xd.wzsqz')}}</text>
				</view>
				<view class="btn-location flexcenter" style="background-color: #ff0000;" v-if="dianweiInfo.checkStatus==3"
					@click="dianweiInfo.checkStatus=0"><text  class="textcenter xiaobai">{{$t('xd.shjj')}}</text></view>
			</view>
		</view>
	</div>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				windowHeight: 0,
				windowWidth: 0,
				latitude: "",
				longitude: "",
				Allmarker: [],
				markers: [],
				nineshow: false,
				circles: [],
				price: "",
				dianweiInfo: {}
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync()
			this.windowHeight = system.windowHeight
			this.windowWidth = system.windowWidth
			this.getloaction()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 确定地址
			fixAddress(type) {
				let data = {
					latitude: this.latitude,
					longitude: this.longitude,
					type, //1未支付选择点位，2支付过被审核拒绝选择点位
				}
				this.commitCheck(data);
			},
			commitCheck(e) {
				uni.showLoading({
					mask: true,
					title:"Loading"
				})
				httpRequest.request('/api/v1/userAddress/existUser', 'GET', {
					lng: e.longitude,
					lat: e.latitude,
				}).then(res => {
					if (res.code == 200) {
						if (res.data.existStatus) {
							uni.hideLoading()
							httpRequest.toast(this.$t('xd.trbj'))
							return false
						} else {
							this.submit(e)
						}
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			submit(e) {
				httpRequest.request('/api/v1/userAddress/add', 'POST', {
					longitude: e.longitude,
					latitude: e.latitude,
				}).then(res => {
					uni.hideLoading()
					console.log("选择地址", res);
					if (res.code == 200) {
						if (e.type == 1) {
							uni.navigateTo({
								url: "/pages/index/perfectInformation"
							})
						} else {
							this.getInfo()
						}
					}
				})
			},
			getInfo() {
				httpRequest.request('/api/v1/userAddress/getInfo', 'GET', {}).then(res => {
					if (res.code == 200) {
						console.log("获取点位信息", res);
						if (res.data) {
							this.dianweiInfo = res.data
						} else {
							this.dianweiInfo = {
								checkStatus: 0,
								payStatus: 1,
								longitude: "",
								latitude: "",
							}
						}
					}
				})
			},
			getprice() {
				httpRequest.request('/api/v1/protocol/getProtocol', 'GET', {
					protocolType: "position_price"
				}).then(res => {
					if (res.code == 200) {
						this.price = res.data.protocolContent
					}
				})
			},
			enterDetail(item) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				let url = "/pages/index/personHome?uid=" + this.currentuid + "&tabsid=" + item.id
				uni.navigateTo({
					url
				})
			},
			// 发生变化定位
			regionchangetab(e) {
				console.log("hahaah", e);
				let that = this;
				if (e.type == "end") {
					setTimeout(() => {
						uni.createMapContext("myMap", this).getCenterLocation({
							type: 'gcj02',
							success: (res) => {
								console.log("当前地图中心的经纬度", res)
								that.latitude = res.latitude;
								that.longitude = res.longitude;
								that.getMarker()
							},
							fail: (err) => {}
						})
					}, 400);
				}

			},
			getloaction() {
				let that = this
				uni.showLoading({
					mask: true,
					title:"Loading"
				})
				uni.getLocation({
					type: 'wgs64',
					success: function(res) {
						uni.hideLoading()
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getMarker()
					},
					fail: function(info) {
						uni.hideLoading()
					}
				});
			},
			getMarker() {
				httpRequest.request('/api/v1/userAddress/list', 'GET', {
					lng: this.longitude,
					lat: this.latitude,
					distance: 50000
				}).then(res => {
					let marker = []
					let circlesData = []
					res.data.forEach(item => {
						let obj = {
							"id": item.id,
							"latitude": item.latitude,
							"longitude": item.longitude,
							"width": 32,
							"height": 32,
							"iconPath": item.avatar,
							"callout": {}
						}
						let myCircles = { //在地图上显示圆
							latitude: item.latitude,
							longitude: item.longitude,
							fillColor: "#e6060a6A", //填充颜色
							color: "#e6060a6A", //描边的颜色
							radius: Number(uni.getStorageSync('fence_radius'))*1000, //半径
							strokeWidth: 2 //描边的宽度
						}
						// 如果该用户需要头像提示了添加callout气泡信息
						if (item.dynamicsStatus) {
							obj.callout = {
								"content": "16", //内容没有用，主要用来撑盒子
								"color": "#ffa126",
								"fontSize": 20,
								"borderRadius": 50,
								"bgColor": "#ffa126",
								"display": "ALWAYS",
								"padding": 3,
								"anchorY": 5
							}
						}
						marker.push(obj)
						circlesData.push(myCircles)
					})
					this.circles= circlesData
					this.markers = JSON.parse(JSON.stringify(marker))
					this.Allmarker = res.data
				})
			},
			markertap(e) {
				// marker被点击了
			}
		}
	}
</script>

<style>
	.cicleclass {
		height: 100px;
		margin-left: -100px;
		margin-top: -100px;
		width: 100px;
		z-index: 9999;
		position: fixed;
		transform: translate(50%, 50%);
		border: 1px solid #ff0000;
		background-color: rgba(255, 0, 0, .1);
		border-radius: 1000px;
	}

	#myMap {
		position: relative;
	}

	.bounce-animation {
		animation: bounce 0.6s alternate;
		/* 动画名称、持续时间、重复次数和交替方向 */
	}

	.controls-play-img {
		height: 30px;
		margin-left: -30px;
		margin-top: -30px;
		width: 30px;
		z-index: 9999;
		position: absolute;
		transform: translate(50%, 50%);
	}

	.jiugongge {
		position: fixed;
		top: 30px;
		right: 0;
		width: 160px;
	}

	.itembox {
		width: 50px;
		height: 50px;
		border-bottom: 1px solid #3B99FF;
		border-right: 1px solid #3B99FF;
		box-sizing: border-box;
		background-color: rgba(59, 153, 255, .1);
	}

	.topborder {
		border-top: 1px solid #3B99FF;
	}

	.leftborder {
		border-left: 1px solid #3B99FF;
	}

	.topleftradius {
		border-radius: 5px 0 0 0;
	}

	.toprightradius {
		border-radius: 0 5px 0 0;
	}

	.bomleftradius {
		border-radius: 0 0 0 5px;
	}

	.bomrightradius {
		border-radius: 0 0 5px 0;
	}
</style>
<style lang="scss">
	.flexleft {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.flexcenter {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.flex_wrap {
		flex-wrap: wrap;
	}
	.sou-item-list {
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 360px;
		height:215px;
	
		.u-search-box {
			padding: 28rpx 32rpx 20rpx;
	
			.search-min-box {
				background: #f2f2f2;
				border-radius: 14rpx;
				box-sizing: border-box;
				color: #999;
				font-size: 28rpx;
				height: 68rpx;
				line-height: 40rpx;
				padding: 14rpx 22rpx;
	
				image {
					display: inline-block;
					height: 32rpx;
					vertical-align: middle;
					width: 32rpx;
				}
			}
		}
	
		.list-item-name-box {
			height: calc(100% - 200rpx);
			width: calc(100% - 60rpx);
			padding: 40rpx;
	
			.category-scroll-view {
				width: 100%;
				height: 100%;
	
				.scroll-Y {
					width: 100%;
					height: 100%;
	
					.scroll-view-item {
						border-bottom: 2rpx solid #e5e5e5;
						margin-right: 20rpx;
						padding: 32rpx 0 30rpx;
						position: relative;
	
						.poi-item-name {
							color: #333;
							font-size: 32rpx;
							line-height: 44rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 90%;
	
							image {
								display: inline-block;
								height: 36rpx;
								margin-right: 8rpx;
								margin-top: -8rpx;
								vertical-align: middle;
								width: 36rpx;
							}
						}
	
						.poi-address {
							color: #666;
							font-size: 26rpx;
							line-height: 36rpx;
							margin-left: 44rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 80%;
						}
	
						.right-icon {
							border-bottom: 4rpx solid #427cff;
							border-left: 4rpx solid #427cff;
							height: 8rpx;
							margin-top: -2rpx;
							position: absolute;
							right: 0;
							top: 50%;
							-webkit-transform: rotate(-45deg);
							transform: rotate(-45deg);
							width: 20rpx;
						}
					}
	
					.loading-box {
						height: 100%;
						width: 100%;
						display: flex;
					}
				}
			}
		}
	
		.but-box {
			padding: 20rpx 40rpx 0;
			border-top: 2rpx solid #e5e5e5;
			padding-bottom: calc(22rpx + 30rpx);
	
			.btn-location {
				background: #427cff;
				border-radius: 200rpx;
				color: #fff;
				font-size: 32rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
			}
		}
	}
</style>